<template>
    <div class="app-container">
        <div class="search-form">
            <div class="panel-title">选择销区品牌</div>
            <el-form :model="xqParams" :inline="true" label-width="100px">
                <el-form-item label="一级销区" prop="xqXq1Code" size="mini">
                    <el-select
                        v-model="xqParams.xqXq1Code"
                        placeholder="请选择"
                        @change="onChangeXq1"
                    >
                        <el-option
                            v-for="dict in xq1Options"
                            :key="dict.RP02"
                            :label="dict.RP02NAME"
                            :value="dict.RP02"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级销区" prop="xqXq2Code" size="mini">
                    <el-select
                        v-model="xqParams.xqXq2Code"
                        placeholder="请选择"
                        @change="onChangeXq2"
                    >
                        <el-option
                            v-for="dict in xq2Options"
                            :key="dict.RP03"
                            :label="dict.RP03NAME"
                            :value="dict.RP03"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌" prop="xqPpCode" size="mini">
                    <el-select
                        v-model="xqParams.xqPpCode"
                        placeholder="请选择"
                        @change="onChangeBrand"
                    >
                        <el-option
                            v-for="dict in brandOptions"
                            :key="dict.BRAND_CODE"
                            :label="dict.BRAND_NAME"
                            :value="dict.BRAND_CODE"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size="mini">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryAll">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="product-panel">
            <div class="xq-product-list">
                <div class="panel-title">品牌产品库</div>
                <div class="search-form">
                    <el-form :model="leftTable.params" :inline="true" label-width="100px">
                        <el-form-item label="产品型号" prop="xqPrXh">
                            <el-input v-model="leftTable.params.xqPrXh" placeholder="请输入"  size="mini"/>
                        </el-form-item>
                        <el-form-item label="产品名称" prop="xqProductName">
                            <el-input v-model="leftTable.params.xqProductName" placeholder="请输入"  size="mini"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryLeft">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <div class="btn-bar">
                    <el-button type="danger" size="mini" :disabled="rightTable.multiple" @click="handleDel">删除</el-button>
                </div> -->
                <el-table
                    border
                    stripe
                    :data="leftTable.list"
                    @selection-change="handleSelectionChangeLeft"
                >
                    <!-- <el-table-column type="selection" width="55" align="center"/> -->
                    <el-table-column
                        label="产品图片"
                        align="center"
                        prop="productImg"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <div class="table-image">
                                <img :src="scope.row.productImg"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="产品编号"
                        align="center"
                        prop="xqProductCode"
                        width="120"
                    />
                    <el-table-column
                        label="产品名称"
                        align="center"
                        prop="xqProductName"
                        width="120"
                    />
                    <el-table-column
                        label="品牌"
                        align="center"
                        prop="productBrand"
                        width="120"
                    />
                    <el-table-column
                        label="模型编号"
                        align="center"
                        prop="productKjlId"
                        width="120"
                    />
                    <el-table-column
                        label="型号"
                        align="center"
                        prop="xqPrXh"
                        width="120"
                    />
                    <el-table-column
                        label="分类"
                        align="center"
                        prop="xqPrType"
                        width="120"
                    />
                    
                    <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        class-name="small-padding fixed-width"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleOpenEdit(scope.row)"
                            >修改</el-button>
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleDel(scope.row.id)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="leftTable.total > 0"
                    :total="leftTable.total"
                    :page.sync="leftTable.params.pageNum"
                    :limit.sync="leftTable.params.pageSize"
                    @pagination="handleQueryLeft"
                />
            </div>
            <div class="dfp-product-list">
                <div class="panel-title">待分配产品库</div>
                <div class="search-form">
                    <el-form :model="rightTable.params" :inline="true" label-width="100px">
                        <el-form-item label="产品名称" prop="productName">
                            <el-input v-model="rightTable.params.productName" placeholder="请输入" size="mini"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRight">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <div class="btn-bar">
                    <el-button type="primary" size="mini" :disabled="rightTable.multiple" @click="handleAdd">添加</el-button>
                </div> -->
                <el-table
                    border
                    stripe
                    :data="rightTable.list"
                    @selection-change="handleSelectionChangeRight"
                >
                    <!-- <el-table-column type="selection" width="55" align="center"/> -->
                    <el-table-column
                        label="产品图片"
                        align="center"
                        prop="productImg"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <div class="table-image">
                                <img :src="scope.row.productImg"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="产品编号"
                        align="center"
                        prop="productCode"
                    />
                    <el-table-column
                        label="产品名称"
                        align="center"
                        prop="productName"
                    />
                    <el-table-column
                        label="品牌"
                        align="center"
                        prop="productBrand"
                    />
                    <el-table-column
                        label="模型编号"
                        align="center"
                        prop="productKjlId"
                    />
                    <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        class-name="small-padding fixed-width"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleAdd(scope.row)"
                            >添加</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="rightTable.total > 0"
                    :total="rightTable.total"
                    :page.sync="rightTable.params.pageNum"
                    :limit.sync="rightTable.params.pageSize"
                    @pagination="handleQueryRight"
                />
            </div>
        </div>

        <el-dialog title="修改" :visible.sync="editPop.open" width="500px">
            <el-form :model="editPop.form" label-width="80px">
                <el-form-item label="型号" prop="xqPrXh">
                    <el-input v-model="editPop.form.xqPrXh" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="分类" prop="xqPrType">
                    <el-input v-model="editPop.form.xqPrType" placeholder="请输入"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import requestCrm from '@/utils/requestCrm'
    import {xqcpklist, dfplist, addXqcpk, updateXqcpk, delXqcpk} from "@/api/sjyXqcp";
    export default {
        name: "sjyXqcp",
        data() {
            return {
                xq1Options:[],
                xq2Options:[],
                brandOptions:[],
                xqParams:{
                    xqXq1Code:undefined,
                    xqXq1:undefined,
                    xqXq2Code:undefined,
                    xqXq2:undefined,
                    xqPpCode:undefined,
                    xqPp:undefined,
                },
                leftTable:{
                    params:{
                        xqPrXh:undefined,
                        xqProductName:undefined,
                        pageSize:10,
                        pageNum:1
                    },
                    total:0,
                    single:false,
                    multiple:false,
                    ids:[],
                    list:[]
                },
                rightTable:{
                    params:{
                        productName:undefined,
                        pageSize:10,
                        pageNum:1
                    },
                    total:0,
                    single:false,
                    multiple:false,
                    ids:[],
                    list:[]
                },
                editPop:{
                    form:{},
                    open:false
                }
            }
        },
        methods:{
            handleOpenEdit(row){
                this.editPop.form = JSON.parse(JSON.stringify(row))
                this.editPop.open = true
            },
            handleQueryAll(){
                if(!this.xqParams.xqPpCode||!this.xqParams.xqXq1Code||!this.xqParams.xqXq2Code){
                    this.msgError('请先选择销区品牌')
                    return
                }
                this.handleQueryLeft()
                this.handleQueryRight()
            },
            handleSelectionChangeLeft(selection){
                this.leftTable.ids = selection.map((item) => item.id);
                this.leftTable.single = selection.length != 1;
                this.leftTable.multiple = !selection.length;
            },
            handleQueryLeft(){
                if(!this.xqParams.xqPpCode||!this.xqParams.xqXq1Code||!this.xqParams.xqXq2Code){
                    this.msgError('请先选择销区品牌')
                    return
                }
                let params = {
                    xqPpCode:this.xqParams.xqPpCode,
                    xqXq1Code:this.xqParams.xqXq1Code,
                    xqXq2Code:this.xqParams.xqXq2Code,
                    ...this.leftTable.params
                }
                xqcpklist(params).then(res=>{
                    this.leftTable.list = res.rows
                    this.leftTable.total = res.total
                })
            },
            handleSelectionChangeRight(selection){
                this.rightTable.ids = selection.map((item) => item.id);
                this.rightTable.single = selection.length != 1;
                this.rightTable.multiple = !selection.length;
            },
            handleQueryRight(){
                if(!this.xqParams.xqPpCode||!this.xqParams.xqXq1Code||!this.xqParams.xqXq2Code){
                    this.msgError('请先选择销区品牌')
                    return
                }
                let params = {
                    productPp:this.xqParams.xqPpCode,
                    productXq1Code:this.xqParams.xqXq1Code,
                    productXq2Code:this.xqParams.xqXq2Code,
                    ...this.rightTable.params
                }
                dfplist(params).then(res=>{
                    this.rightTable.list = res.rows
                    this.rightTable.total = res.total
                })
            },

            handleAdd(row){        
                let params = {
                    // kjlId: row.kjlId,
                    // productImg: row.productImg,
                    // productKjlId: row.productKjlId,
                    
                    // xqPrId: row.productId,
                    // xqPrSort: undefined,
                    // xqPrType: row.productType,
                    // xqPrXh: undefined,
                    // xqProductCode: row.productCode,
                    // xqProductName: row.productName,
                    xqProductId: row.productId,
                    xqXq1: this.xqParams.xqXq1,
                    xqXq1Code: this.xqParams.xqXq1Code,
                    xqXq2: this.xqParams.xqXq2,
                    xqXq2Code: this.xqParams.xqXq2Code,
                    xqBrand: this.xqParams.xqPp,
                    xqPp: this.xqParams.xqPp,
                    xqPpCode: this.xqParams.xqPpCode
                }        
                addXqcpk(params).then(res=>{
                    this.msgSuccess('新增成功')
                    this.handleQueryAll()
                })
            },

            handleDel(id){
                let ids = id||this.leftTable.ids.join(',')
                delXqcpk({ids}).then(res=>{
                    this.msgSuccess('删除成功')
                    this.handleQueryAll()
                })
            },

            handleUpdate(){
                updateXqcpk({id:this.editPop.form.id, xqPrXh:this.editPop.form.xqPrXh, xqPrType:this.editPop.form.xqPrType}).then(res=>{
                    this.msgSuccess('删除成功')
                    this.handleQueryAll()
                    this.editPop.open = false
                    this.editPop.form = {}
                })
            },

            onChangeXq1(e){
                let xq1 = this.xq1Options.find(obj=>{
                    return e == obj.RP02
                })
                if(xq1){
                    this.xqParams.xqXq1 = xq1.RP02NAME
                    this.xqParams.xqXq2 = undefined
                    this.xqParams.xqXq2Code = undefined
                    this.xqParams.xqPp = undefined
                    this.xqParams.xqPpCode = undefined
                    this.xq2Options = []
                    this.brandOptions = []
                }
                this.getXQ2Options(xq1.RP02)
            },
            onChangeXq2(e){
                let xq2 = this.xq2Options.find(obj=>{
                    return e == obj.RP03
                })
                if(xq2){
                    this.xqParams.xqXq2 = xq2.RP03NAME
                    this.xqParams.xqPp = undefined
                    this.xqParams.xqPpCode = undefined
                    this.brandOptions = []
                }
                this.getBrandOptions(xq2.RP03)
            },
            onChangeBrand(e){
                let brand = this.brandOptions.find(obj=>{
                    return e == obj.BRAND_CODE
                })
                if(brand){
                    this.xqParams.xqPp = brand.BRAND_NAME
                }
            },
            getXQ1Options(){
                requestCrm({
                    url:'WxService?method=getXQ1ByMemCode',
                    method: 'post',
                    data: {memCode:'HN029163'}
                }).then(res=>{
                    this.xq1Options = res.data
                })
            },
            getXQ2Options(xq1code){
                requestCrm({
                    url:'WxService?method=getXQ2ByMemCodeAndXQ1',
                    method: 'post',
                    data: {xq1code, memCode:'HN029163'}
                }).then(res=>{
                    this.xq2Options = res.data
                })
            },
            getBrandOptions(xq2Code){
                requestCrm({
                    url:'WxService?method=getBrandByMemCodeAndXQ2',
                    method: 'post',
                    data: {xq2Code, memCode:'HN029163'}
                }).then(res=>{
                    this.brandOptions = res.data
                })
            },
        },
        created(){
            this.getXQ1Options()
        }
    }
</script>
<style scoped>
    .panel-title{
        margin-bottom: 20px;
        font-weight: bold;
    }
    .product-panel{
        display: flex;
        margin-top: 40px;
        width: 100%;
    }
    .xq-product-list{
        margin-right: 20px;
        flex: 0 0 50%;
        width: 50%;
    }
    .xq-product-list .el-table{
        width: 100%;
    }
    .dfp-product-list{
        flex: 0 0 calc(50% - 20px);
        width: calc(50% - 20px);
    }
    .dfp-product-list .el-table{
        width: 100%;
    }
    .btn-bar{
        margin-bottom: 10px;
    }
    .table-image{
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    .table-image img{
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
</style>